<template>
  <div class="header">
    <el-row :gutter="20">
        <el-col :span="3">
            <div class="grid-content bg-purple">
                <div class="icon">
                    <a href="/home">
                        <img :src="`${publicPath}klara.ico`">
                    </a>
                </div>
                <div class="name">
                    <el-link :underline="false" href="/home">茶叶销售系统</el-link>
                </div>
                &nbsp;
            </div></el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple">
                限时促销
            </div></el-col>
        <el-col :span="15">
            <div class="grid-content bg-purple">
              喂！三点几了，做卵啊做，饮茶先啦！
            </div></el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple">
                &nbsp;
                <el-dropdown style="float:right">
                    <span class="el-dropdown-link">
                        {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- 根据用户权限选择禁用选项 -->
                        <el-dropdown-item icon="el-icon-user" v-show="user!=null||manger!=null" @click.native="myinfo">个人主页</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-shopping-cart-2" v-show="user!=null" @click.native="mycart">我的购物车</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-s-order" v-show="user!=null" @click.native="myorders">我的订单</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-menu" v-show="judgeAuthority()" @click.native="toManger">管理中心</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button" v-show="user!=null||manger!=null" @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div style="margin-top: 8px;float:right;margin-right: 4px ">
                    <el-avatar :src="user!=null||manger!=null?'http://172.17.33.23:8888/api/files/download/32c755b33bf74d81a35cdd9d62efcbc3':'user!=null||manger!=null'"></el-avatar>
                </div>
            </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name:'Header',
    created(){
        this.user = this.$store.state.user
        this.manger = this.$store.state.manger
        if(this.user!=null){
            this.nickname = this.$store.state.user.nickName
        }else if(this.manger!=null){
            this.nickname = this.$store.state.manger.nickName
        }else{
            this.nickname = "未登录"
        }
        // this.nickname=this.$store.state.user.nickName
    },
    data () {
        return {
            publicPath: process.env.BASE_URL,
            nickname:null,
            user:null,
            manger:null,
        }
    },
    methods:{
        toManger(){
            this.$router.push("/m/commodity")
        },
        judgeAuthority(){
            if(this.user!=null){
                if(this.user.identify!=2){//普通用户不显示
                    return false
                }else{
                    return true
                    // console.log('this.user.identify :>> ', this.user.identify);
                }
            }
            if(this.manger!=null){
                return true
            }
        },
        logout(){
            sessionStorage.clear();//清除sessionStorage
            this.$router.push("/login");//回到登录
        },
        mycart(){
            this.$router.push("/cart");//回到购物车
        },
        myorders(){
            this.$router.push("/orders");//回到订单
        },
        myinfo(){
            this.$router.push("/userinfo");//回到个人信息
        }
    }
}
</script>

<style scoped>
    .icon{
        margin-top: 8px;
        float: left;
    }
    .name{
        margin-left: 8px;
        float: left;
    }
    .right-header{
        float: right;
    }
    .el-dropdown-link {
        cursor: pointer;
        /* color: #409EFF; */
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .demonstration {
        display: block;
        /* color: #8492a6; */
        font-size: 14px;
        margin-bottom: 20px;
    }
     .el-row {
        margin-bottom: 20px;
        /* &:last-child {
        margin-bottom: 0;
        } */
    }
    .el-row:last-child{
        margin-bottom: 0;
        }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        /* background: #99a9bf; */
    }
    .bg-purple {
        /* background: #d3dce6; */
    }
    .bg-purple-light {
        /* background: #e5e9f2; */
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        /* background-color: #f9fafc; */
    }
</style>